<template>
  <!-- controls="controls" -->
  <div class="videoContainer">
    <video :src="props.url" :controls="props.controls"
           ref="videoRef"
           :muted="!videoObj.isVolumn">
      您的浏览器不支持 video 标签。
    </video>
    <div class="videoBox" v-if="!props.controls">
      <div class="top">
        <div class="top-l">
          <div class="iconBox">
            <i v-show="!videoObj.playing"
               class="icon el-icon-video-play"
               @click="play"></i>
            <i v-show="videoObj.playing"
               class="icon el-icon-video-pause"
               @click="pause"></i>
          </div>
          <div class="top-r">
            {{getTimeLabel()}}
          </div>
        </div>
        <div class="top-r">
          <div class="volumn">
            <i v-show="videoObj.isVolumn"
               class="icon el-icon-message-solid"
               @click="volumnClick"></i>
            <i v-show="!videoObj.isVolumn"
               class="icon el-icon-bell"
               @click="volumnClick"></i>
          </div>
          <div class="fullScreen">
            <i v-show="videoObj.isVolumn"
               class="icon el-icon-message-solid"
               @click="volumnClick"></i>
            <i v-show="!videoObj.isVolumn"
               class="icon el-icon-bell"
               @click="volumnClick"></i>
          </div>
          <div class="more">
            <i v-show="videoObj.isVolumn"
               class="icon el-icon-message-solid"
               @click="volumnClick"></i>
            <i v-show="!videoObj.isVolumn"
               class="icon el-icon-bell"
               @click="volumnClick"></i>
          </div>

        </div>
      </div>
      <div class="bottom">
        <el-slider v-model="videoObj.sliderValue"
                   @change="sliderValueChange"></el-slider>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { reactive, defineProps, ref } from "vue";

const props = defineProps({
  url: String,
  controls: Boolean
});
const videoObj = reactive({
  playing: false,
  isVolumn: true,
  duration: 0,
  sliderValue: 0,
  currentTime: 0,
});
var timer = null;
var videoRef = ref();
// 显示时间
function getTimeLabel() {
  var pMin = Math.floor(videoObj.currentTime / 60);
  var pSec =
    Math.floor(videoObj.currentTime % 60) < 10
      ? "0" + Math.floor(videoObj.currentTime % 60)
      : Math.floor(videoObj.currentTime % 60);
  var nMin = Math.floor(videoObj.duration / 60);
  var nSec =
    Math.floor(videoObj.duration % 60) < 10
      ? "0" + Math.floor(videoObj.duration % 60)
      : Math.floor(videoObj.duration % 60);
  return `${pMin}:${pSec}/${nMin}:${nSec}`;
}
// 拖动进度条
function sliderValueChange(val) {
  var time = (val / 100) * videoObj.duration;
  videoRef.value.currentTime = time;
  play();
}
function play() {
  videoObj.playing = true;
  videoObj.duration = videoRef.value.duration;
  videoObj.currentTime = videoRef.value.currentTime;
  videoObj.sliderValue = (videoRef.value.currentTime / videoObj.duration) * 100;
  clearInterval(timer);
  timer = setInterval(function () {
    videoObj.currentTime = videoRef.value.currentTime;
    videoObj.sliderValue =
      (videoRef.value.currentTime / videoObj.duration) * 100;
  }, 250);
  videoRef.value.play();
}
function pause() {
  clearInterval(timer);
  videoObj.playing = false;
  videoRef.value.pause();
}
function volumnClick() {
  if (videoObj.isVolumn) {
  } else {
  }
  videoObj.isVolumn = !videoObj.isVolumn;
}
</script>

<style lang="scss" scoped>
.videoContainer {
  width: fit-content;
  position: relative;
  color: #fff;
  &:hover {
    .videoBox {
      display: block;
    }
  }
}
.videoContainer * {
  box-sizing: border-box;
}
.videoBox {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0), rgba(0, 0, 0, 0));
  padding: 10px 10px 0;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .top-l {
    display: flex;
  }
  .top-r {
    display: flex;
  }
  .iconBox {
    margin-right: 10px;
    font-size: 18px;
  }
}
</style>